<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"  %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="sellerHeader.jsp" %>
<title>시장통계</title>
<link href="/Jangdolbaeng2/css/bootstrap.min.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<script src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<link href="/Jangdolbaeng2/css/bootstrap.min.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});

$(document).ready(function(){
	
	init();
});	

function init()
{
	$.ajax({
		url: 'shopNameList.action',
		type: 'POST',
		dateType: 'json',
		success: shopNameOutput
	});
}

function shopNameOutput(json)
{
	$('#listDiv').html('');
	
	var str = '<center>';	
	str += '<table>'
	str += '<tr>';
	str += '<td>'; 
	str += '<span style="font-family: anew; font-weight: bold;"><a href="marketStatistics.action">' + '가게별' + '</span></a>';
	str += '&nbsp;&nbsp;'; 
	str += '<span style="font-family: anew; font-weight: bold;"><a href="categoryStatistics.action">' + '카테고리별' + '</span></a>';
	str += '</td>';
	str += '</tr>';
	str += '</table>';
	str += '<br>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 400px;">';	
	str += '<td  class="success" style="font-weight: bold" colspan="2">' + '가게별' + '</td>';
	$.each(json.shopNameList , function(key, item){
	str += '<tr>'; 
	str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:dayfunc(' + item.shop_seq + ')">' + item.shop_seq + '</a>' + '</td>';
	str += '<td>' + item.name + '</td>';
	str += '</tr>';
	});
	str += '</table>'; 
	str += '</center>';
	$('#listDiv').html(str);
}

function dayfunc(shop_seq)
{
	$.ajax({
		url: 'shopDaySales.action',
		type: 'POST',
		dateType: 'json',
		data: 
		{
			shop_seq: shop_seq
		},
		success: shopDayOutput
	});

}

function shopDayOutput(json)
{
	if(json.shopDayList == '')
	{
		alert('오늘 판매기록이 없습니다.');
		return false;
	}
	
	$('#listDiv').html('');
	$('#my_chart').html('');
	
	var arr1 = new Array();
	var arr2 = new Array();
	
	$.each(json.shopDayList, function(key, item){
		arr1[key] = item.PRODUCT_NAME;
		arr2[key] = item.VOLUME;
	});
	
	var data = new google.visualization.DataTable();
	
	data.addColumn('string', '상품이름');	
	data.addColumn('number', '매출량');

	for(i = 0; i < arr1.length; i++){
		data.addRow([arr1[i], arr2[i]]);
	}
		
	var options = {
	    title: '매출량 비교',
	};
	
    var chart = new google.visualization.PieChart(document.getElementById('my_chart'));
    chart.draw(data, options);
    
 	var shopname;
    
 	$.each(json.shopDayList, function(key, item){
    	
    	shopname = item.SHOP_NAME;
    });
    
	var shopseq;
	var str = '&nbsp';	
	str += '<center>';
	str += '<table class="table table-striped table-hover table-bordered" style="text-align: center; width: 300px;">';
	str += '<td align="center" style="font-weight: bold">' + shopname + '</td>';
	str += '</table>';
	str += '<br><br>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 400px;">';
	str += '<td class="success" style="font-weight: bold">' + '상품' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '가격' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '개수' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '총매출' + '</td>';
	$.each(json.shopDayList, function(key, item){
	shopseq = item.SHOP_SEQ;
	str += '<tr>';
	str += '<td>' + item.PRODUCT_NAME + '</td>';
	str += '<td>' + item.PRODUCT_PRICE + '</td>';
	str += '<td>' + item.QUANTITY + '</td>';
	str += '<td>' + item.VOLUME + '</td>';
	str += '</tr>';
	});
	str += '</table>';
	str += '<br><br>';
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:dayfunc(' + shopseq + ')">' + '당일' + '</a>' + '</span></button>';				
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:weekfunc(' + shopseq + ')">' + '일주일' + '</a>' + '</span></button>';				
	str += '</center>';	
	
	$('#listDiv').html(str);
	
}

function weekfunc(shop_seq)
{
	$.ajax({
		url: 'shopWeekSales.action',
		type: 'POST',
		dateType: 'json',
		data: { shop_seq: shop_seq },
		success: shopWeekOutput
	});
	
}

function shopWeekOutput(json)
{
	if(json.shopWeekList == '')
	{
		alert('일주일간 판매기록이 없습니다.');
		return false;
	}
	
	$('#listDiv').html('');
	$('#my_chart').html('');
	
	var arr1 = new Array();
	var arr2 = new Array();
	
	$.each(json.shopWeekList, function(key, item){
		arr1[key] = item.PRODUCT_NAME;
		arr2[key] = item.VOLUME;
	});
	
	var data = new google.visualization.DataTable();
	
	data.addColumn('string', '상품이름');	
	data.addColumn('number', '매출량');

	for(i = 0; i < arr1.length; i++){
		data.addRow([arr1[i], arr2[i]]);
	}
		
	var options = {
	    title: '매출량 비교',
	};
	
    var chart = new google.visualization.PieChart(document.getElementById('my_chart'));
    chart.draw(data, options);
    
 	var shopname;
    
 	$.each(json.shopWeekList, function(key, item){
    	
    	shopname = item.SHOP_NAME;
    });
    
	var shopseq;
	var str = '&nbsp';	
	str += '<center>';
	str += '<table class="table table-striped table-hover table-bordered" style="text-align: center; width: 300px;">';
	str += '<td align="center" style="font-weight: bold">' + shopname + '</td>';
	str += '</table>';
	str += '<br><br>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 400px;">';
	str += '<td class="success" style="font-weight: bold">' + '상품' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '가격' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '개수' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '총매출' + '</td>';
	$.each(json.shopWeekList, function(key, item){
	shopseq = item.SHOP_SEQ;
	str += '<tr>';
	str += '<td>' + item.PRODUCT_NAME + '</td>';
	str += '<td>' + item.PRODUCT_PRICE + '</td>';
	str += '<td>' + item.QUANTITY + '</td>';
	str += '<td>' + item.VOLUME + '</td>';
	str += '</tr>';
	});
	str += '</table>';
	str += '<br><br>';
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:dayfunc(' + shopseq + ')">' + '당일' + '</a>' + '</span></button>';				
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:weekfunc(' + shopseq + ')">' + '일주일' + '</a>' + '</span></button>';				
	str += '</center>';	
	
	$('#listDiv').html(str);
}


</script>
</head>
<body>

<div class="container" align="center">
	<h3 align="center" style="margin-top: 50px; margin-bottom: 20px;"><span class="glyphicon glyphicon-stats"></span> <span style="font-family: anew">시장통계</span></h3>
</div>

<div id="wrapper">
	<div id="listDiv"></div>

	<br><br>

	<div id="my_chart" style="position:absolute; left:50px; top:300px; width:400px; height:300px;"></div>
	
</div>	
</body>
</html>